<template>
  <div>
    <MyHeader :backgroundColor="'red'" :color="'black'"></MyHeader>
    <div id="app">
      <MyGoods :good="item" v-for="item in goodList" :key="item.id"></MyGoods>
    </div>
    <MyFooter :goodList="goodList" @chanGe="changeALL"></MyFooter>
  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'
import MyHeader from './components/MyHeader.vue'
import axios from 'axios'
export default {
  data() {
    return {
      // 定义一个数组存数据
      goodList:[]
    }
  },
  components:{MyFooter,MyGoods,MyHeader},
  created(){
    this.loadDate()
  },
  methods: {
   async loadDate(){
      // 发送ajax请求
      const res = await axios.get('https://www.escook.cn/api/cart')
      // 将ajax的数据放入新的数组上
      this.goodList = res.data.list
    },
    changeALL(bool){
      this.goodList.forEach(item => item.goods_state=bool);
    }
  },

}
</script>
<style>
#app {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>